/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState } from "react";
import { Table, Alert, Popconfirm, message } from "antd";
import { brandsMap_name } from "@/utils/utils";
import Bar from "../Bar/index";
import EditWeightModal from "./editWeightModal";

const fotmatNum = (val, desc = "") => {
  if (val && parseFloat(val)) {
    return `${parseFloat(val).toFixed(2)}${desc}`;
  } else {
    return "--";
  }
};

const Tables = props => {
  const { loading, POST, refreshPage, pagination, ...restProps } = props;
  const [selectedRowsKeys, setSelectedRowsKeys] = useState([]);
  const [selectRowsValues, setSelectRowsValues] = useState([]);
  const [modalData, setModalData] = useState(null);
  const columns = [
    {
      title: "快递品牌",
      dataIndex: "brand",
      key: "brand",
      align: "center",
      render: val => brandsMap_name(val),
    },
    {
      title: "运单号",
      dataIndex: "waybill_no",
      key: "waybill_no",
      align: "center",
    },
    {
      title: "运费",
      dataIndex: "fee",
      key: "fee",
      align: "center",
      render: val => fotmatNum(val, "元"),
    },
    {
      title: "报价单",
      dataIndex: "quotation_name",
      key: "quotation_name",
      align: "center",
      render: val => (
        <div style={{ color: val ? "" : "orange" }}>{val || "暂无报价单,请维护"} </div>
      ),
    },

    {
      title: "录入重量",
      dataIndex: "charging_weight",
      key: "charging_weight",
      align: "center",
      render: val => fotmatNum(val, "kg"),
    },
    {
      title: "驿站名称",
      dataIndex: "inn_name",
      key: "inn_name",
      align: "center",
    },
    {
      title: "驿站手机号",
      dataIndex: "collect_courier_mobile",
      key: "collect_courier_mobile",
      align: "center",
    },
    {
      title: "创建时间",
      dataIndex: "complete_at",
      key: "complete_at",
      align: "center",
    },
    {
      title: "是否计算",
      dataIndex: "is_compute",
      key: "is_compute",
      align: "center",
      render: val => (
        <div style={{ color: val == "1" ? "" : "orange" }}>{val == "1" ? "已计算" : "未计算"} </div>
      ),
    },
    {
      title: "操作",
      dataIndex: "operanor",
      key: "operanor",
      align: "center",
      width: "10%",
      render: (_, record) => {
        return (
          <div>
            <a onClick={onEdit.bind(null, record)}>编辑</a>
            <Popconfirm
              title="确认删除此条记录？"
              okText="确认"
              cancelText="取消"
              placement="topRight"
              onConfirm={onDelete.bind(null, record.id)}
            >
              <a style={{ marginLeft: "10px", color: "red" }}>删除</a>
            </Popconfirm>
          </div>
        );
      },
    },
  ];
  const onEdit = record => {
    const valueList = record.id ? [record] : selectRowsValues;
    setModalData(valueList);
  };
  const onDelete = async event => {
    const ids = typeof event === "string" ? event : selectedRowsKeys.join(",");
    POST({
      type: "order_calculate/deleteList",
      payload: {
        waybill_no: ids,
      },
    }).then(() => {
      message.success("删除成功", 1);
      onRefreshPage();
    });
  };

  const onSelectRowChange = (rowKey, rowValue) => {
    const newValue = selectRowsValues.concat(rowValue);
    setSelectedRowsKeys(rowKey);
    setSelectRowsValues(rowKey.map(item => newValue.find(itemm => itemm.id == item)));
  };

  const rowSelectionOption = {
    selectedRowKeys: selectedRowsKeys,
    onChange: onSelectRowChange,
  };
  const onClear = () => onSelectRowChange([], []);

  const onRefreshPage = () => {
    onClear();
    refreshPage();
  };

  return (
    <>
      <Bar
        rowsKeys={selectedRowsKeys}
        onDelete={onDelete}
        onEdit={onEdit}
        POST={POST}
        refreshPage={onRefreshPage}
      />
      <Alert
        message={
          <>
            已选择 <a style={{ fontWeight: 600 }}>{selectedRowsKeys.length}</a> 项&nbsp;&nbsp;
            <a onClick={onClear} style={{ marginLeft: 24 }}>
              清空
            </a>
          </>
        }
        type="info"
        showIcon
      />
      <Table
        rowSelection={rowSelectionOption}
        loading={loading}
        columns={columns}
        rowKey="id"
        pagination={{
          ...pagination,
          showSizeChanger: true,
          pageSizeOptions: ["20", "50", "100", "200"],
        }}
        {...restProps}
      />
      <EditWeightModal
        data={modalData}
        onClose={setModalData}
        POST={POST}
        refreshPage={onRefreshPage}
      />
    </>
  );
};

export default Tables;
